<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="选择医院" prop="hospitalId">
        <el-select v-model="queryParams.hospitalId" placeholder="请选择医院" clearable filterable @change="handleQuery">
          <el-option v-for="data in hospitalOptions" :key="data.value" :label="data.label" :value="data.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="查询日期">
        <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="handleQuery" ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="text" link @click="getDateRange('zr')">昨日</el-button>
        <el-button type="text" link @click="getDateRange('bz')">本周</el-button>
        <el-button type="text" link @click="getDateRange('sz')">上周</el-button>
        <el-button type="text" link @click="getDateRange('by')">本月</el-button>
        <el-button type="text" link @click="getDateRange('sy')">上月</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="countList">
      <el-table-column label="医院名称" align="center" prop="hospitalName" >
        <template slot-scope="scope">
          <el-link @click="details(scope.row)" type="primary">{{ scope.row.hospitalName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="医院地址" align="center" prop="hospitalAddress" :showOverflowTooltip="true" />
      <el-table-column label="睡眠监测垫" align="center">
        <el-table-column prop="mattressNums" label="数量" align="center" />
        <el-table-column prop="mattressUseTimes" label="使用次数" align="center" />
      </el-table-column>
      <el-table-column label="多参数监测仪" align="center">
        <el-table-column prop="braceletNums" label="数量" align="center" />
        <el-table-column prop="braceletUseTimes" label="使用次数" align="center" />
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 设备使用详情 -->
    <el-dialog :visible.sync="detailDialogVisible" :title="detailDialogTitle">
      <el-table :data="detailData" show-summary>
        <el-table-column prop="hospitalName" label="医生账号" align="center" />
        <el-table-column prop="mattressUseTimes" label="睡眠监测垫使用次数" align="center" />
        <el-table-column prop="braceletUseTimes" label="多参数监测仪使用次数" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {countByHospital, list} from "@/api/business/count";
import {getOptionData} from "@/api/business/hospital";
import {formatDate} from "@/utils";
import {getCurrentDate, getCurrentMonth, getCurrentWeek, getPreviousMonth, getPreviousWeek} from "@/utils/dateUtil";

export default {
  name: "Count",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      countList: [],
      // 医院数据
      hospitalOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        hospitalId: null,
      },
      // 日期范围
      dateRange: [],
      // 使用详情
      detailDialogVisible: false,
      detailDialogTitle: '',
      detailData: [],
    };
  },
  created() {
    this.getHospitalData();
    this.getList();
  },
  methods: {
    getHospitalData (){
      getOptionData().then(response => {
        this.hospitalOptions = response.data;
      });
    },
    /** 查询医院科室信息列表 */
    getList() {
      this.loading = true;
      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.countList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('equipment/count/export', {
        ...this.queryParams
      }, `设备统计_${new Date().getTime()}.xlsx`)
    },
    /** 获取时间区间 */
    getDateRange(type){
      let currentMonth = [];
      // 昨日
      if(type === "zr") {
        // 当前时间
        let currentDate = getCurrentDate();
        let yesterday = currentDate.setDate(currentDate.getDate() - 1);
        currentMonth = [yesterday, yesterday];
      }
      // 本周
      if(type === "bz") {
        currentMonth = getCurrentWeek();
      }
      // 上周
      if(type === "sz") {
        currentMonth = getPreviousWeek();
      }
      // 本月
      if(type === "by") {
        currentMonth = getCurrentMonth();
      }
      // 上月
      if(type === "sy") {
        currentMonth = getPreviousMonth();
      }

      this.dateRange = [
        formatDate(currentMonth[0]),
        formatDate(currentMonth[1])
      ];
      this.getList();
    },

    details(obj){
      let that = this;
      countByHospital(this.addDateRange({hospitalId: obj.hospitalId}, this.dateRange)).then((res) => {
        that.detailDialogTitle = "使用详情（医院："+obj.hospitalName+"）";
        that.detailDialogVisible = true;
        that.detailData = res.data;
      })
    },
  }
};
</script>
